<template lang='pug'>
  .status-content
    .status-item.mouse-position
        img(src="@assets/image/mapstatus/mouse.svg")
        span#mouse-position 113.000,36.000
    .status-item.screen-center
        img(src="@assets/image/mapstatus/screen.png")
        span#screen-center
    .status-item.map-zoom
        img(src="@assets/image/mapstatus/zoom.svg")
        span#map-zoom
    .status-item.scale-bar
        img(src="@assets/image/mapstatus/scale.svg")
        #scale-bar
</template>

<script>
import { transform } from 'ol/proj'
import olUtils from '../../scripts/olBasicUtils'
export default {
  name: 'mapStatus',
  data () {
    return {
    }
  },
  mounted () {
    // 地图加载完成
    this.$bus.$once('mapIsInit', e => {
      this.initListener()
    })
  },
  methods: {
    initListener () {
      this.initMouserMove()
      this.initViewChange()
    },
    initMouserMove () {
      olMap.on('pointermove', (e) => {
        // var pixel = olMap.getEventPixel(e.originalEvent);
        // var hit = olMap.hasFeatureAtPixel(pixel);
        // olMap.getTargetElement().style.cursor = hit ? 'pointer' : '';
        const coord = olUtils.From3857To4326(e.coordinate)

        document.getElementById('mouse-position').innerHTML = `${coord[0].toFixed(3)},${coord[1].toFixed(3)}`
      })
    },
    initViewChange () {
      olMap.on('moveend', (e) => {
        const center = olUtils.From3857To4326(olMap.getView().getCenter())
        const zoom = olMap.getView().getZoom() // 获取当前地图的缩放级别
        document.getElementById('screen-center').innerHTML = `${center[0].toFixed(3)},${center[1].toFixed(3)}`
        document.getElementById('map-zoom').innerHTML = `${zoom.toFixed(1)}`
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.status-content
    z-index: 55;
    background: #00000052;
    width fit-content
    height 24px
    position fixed
    bottom 10px
    right 72px
    border-radius 4px
    // box-shadow #6666668c 0px 0px 4px
    display flex
    align-items center
.status-item
    margin-right 8px
    color #fff
    font-size 14px
    display flex
    align-items center
    background: #0c0c0c17;
    padding: 2px 4px;
    border-radius: 4px;
    img
        margin 0 4px
        // width 16px
        height 16px
    span
        // background: #0c0c0c4d;
        // padding: 2px 4px;
        // border-radius: 4px;
        margin-right 4px
.scale-bar
    margin-right 0px
    width fit-content
    img
        margin-right 6px
    >>>.ol-scale-line
        position relative
        background: transparent;
        bottom: auto;
        left: auto;
        padding: 0;
        .ol-scale-line-inner
            font-size 14px
            color #fff
</style>
